<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>商品购物车</title>
		<link rel="shortcut icon" href="./../../favicon.ico">
		<link rel="stylesheet" href="../../style/cart/shoppingCart.css">
		<script type="text/javascript" src="./../../plugins/jQuery/jquery-3.6.0.js"></script>
		<script type="text/javascript" src="./../../plugins/vue/vue.js"></script>
		<script type="text/javascript" src="./../../plugins/axios/axios.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="./../../plugins/element-ui/index.css">
		<!-- 引入组件库 -->
		<script src="./../../plugins/element-ui/index.js"></script>
		<!-- 引入layer -->
		<script src="../../plugins/layer-master/dist/layer.js"></script>
		<style>
			.el-table {
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<nav class="public-header">
				<a href="../../index.html">网站首页</a>
				<a href="">我的订单</a>
				<a href="">我的地址</a>
			</nav>
			<div class="cart">
				<template>
					<el-table ref="multipleTable" :data="shopping_carts" tooltip-effect="dark" style="width: 87%"
						@selection-change='selectRemoveBook'>
						<el-table-column type="selection" width="55" align="center">
						</el-table-column>
						<el-table-column label="商品" width="220" align="center">
							<template slot-scope="scope">
								<img width="120px" :src=`http:${scope.row.imageName}`>
							</template>
						</el-table-column>
						<el-table-column label="书名" align="center">
							<template slot-scope="scope">
								{{scope.row.name}}
							</template>
						</el-table-column>
						<el-table-column label="出版社" align="center">
							<template slot-scope="scope">
								{{scope.row.publisher}}
							</template>
						</el-table-column>
						<el-table-column prop="price" label="单价" width="120" align="center">
							<template slot-scope="scope">

								<span v-if="scope.row.discountRate===null">
									￥{{scope.row.price}}元
								</span>
								<span style="text-decoration: line-through" v-else>
									<small>￥</small>{{scope.row.price}}
								</span>
								<span v-if="scope.row.discountRate!==null">
									<small>￥</small>{{(scope.row.discountRate*scope.row.price).toFixed(2)}}
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="cartNum" label="数量" show-overflow-tooltip align="center" width="200px">
							<template slot-scope="scope">
								<el-button size="mini" type="danger"
									@click='decrementNumber(scope.row.id,scope.row.cartNum)'>-1</el-button>
								<input type="type" style="width: 50px; height: 23px"
									@blur="updateNumber(scope.row.id,scope.row.cartNum)"
									v-model.number="scope.row.cartNum">
								<el-button size="mini" type="success"
									@click="incrementNumber(scope.row.id)">+1</el-button>
							</template>

						</el-table-column>
						<el-table-column prop="address" label="小计" show-overflow-tooltip align="center" width="120">
							<template
								slot-scope="scope">￥{{ scope.row.discountRate===null?(scope.row.price * scope.row.cartNum).toFixed(2):(scope.row.discountRate*scope.row.price * scope.row.cartNum).toFixed(2) }}元</template>
						</el-table-column>
						<el-table-column prop="address" label="操作" show-overflow-tooltip align="center" width="120">
							<template slot-scope="scope">
								<el-button size="mini" type="danger" align="center" @click="removeCart(scope.row)">
									删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-button type="danger" class="dangers" id="batchDeleteBtn" @click="removeCartBatch">
						批量删除
					</el-button>
					<div class="cart-btn"><span>总价：</span><span> ¥ {{total_price}}元</span>
						<button class="btn" @click="toShowPay">去结算</button>
					</div>
				</template>
				<!-- 页脚部分 -->
				<div class="extra">
					<div class="wrapper">
						<!-- 版权信息 -->
						<div class="copyright">
							<p>
								<a href="javascript:;">关于我们</a>
								<a href="javascript:;">帮助中心</a>
								<a href="javascript:;">售后服务</a>
								<a href="javascript:;">配送与验收</a>
								<a href="javascript:;">商务合作</a>
								<a href="javascript:;">搜索推荐</a>
								<a href="javascript:;">友情链接</a>
							</p>
							<p>CopyRight &copy; 湖北理工学院</p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>

<script>
	new Vue({
		el: '#app',
		data() {
			return {
				shopping_carts: [],
				select_remove_carts: [],
				total_price: 0
			}
		},
		methods: {
			loadMyShoppingCarts() {
				axios({
					method: 'get',
					url: 'http://localhost:9000/shopping_cart',
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							message: '请登录后访问',
							type: 'error',
							duration: 1000,
							onClose: function() {
								location.href = '../login/login.html'
							}
						});
						return
					}
					this.shopping_carts = resp.data.data
				})
			},
			incrementNumber(bookId) {
				axios({
					method: 'put',
					url: 'http://localhost:9000/shopping_cart/change_number/' + bookId + '/1',
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							message: resp.data.error,
							type: 'error'
						});
						return
					}
					this.loadMyShoppingCarts()
				})
			},
			decrementNumber(bookId, cartNum) {
				if (cartNum - 1 <= 0) {
					this.$message({
						message: '购物车中的商品不能小于1',
						type: 'error'
					});
					return
				}

				axios({
					method: 'put',
					url: 'http://localhost:9000/shopping_cart/change_number/' + bookId + '/-1',
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							message: resp.data.error,
							type: 'error'
						});
						return
					}
					this.loadMyShoppingCarts()
				})
			},
			updateNumber(bookId, cartNum) {
				console.log(111111)
				if (cartNum <= 0) {
					this.$message({
						message: '购物车中的商品不能小于1',
						type: 'error'
					});
					return
				}
				// 验证输入的是否是数字
				let regex = /^[0-9]{1,4}$/
				let b = regex.test(cartNum)
				console.log(b)
				if (!b) {
					this.$message({
						message: '购物车中的商品数量必须为整数',
						type: 'error'
					});
					this.loadMyShoppingCarts()
					return
				}
				axios({
					method: 'put',
					url: 'http://localhost:9000/shopping_cart/change_number2/' + bookId + '/' + cartNum,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							message: resp.data.error,
							type: 'error'
						});
						return
					}
					this.loadMyShoppingCarts()
				})
			},
			removeCart(row) {
				this.$confirm('是否将【' + row.name + '】从购物车中移除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios({
						method: 'delete',
						url: 'http://localhost:9000/shopping_cart/remove_cart/' + row.id,
						headers: {
							token: localStorage.getItem('token')
						}
					}).then(resp => {
						this.$message({
							type: 'success',
							message: '已成功移除'
						});

						this.loadMyShoppingCarts()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			selectRemoveBook(items) {
				this.select_remove_carts = items
				// 计算总价
				let total = 0
				for (let i = 0; i < this.select_remove_carts.length; i++) {
					let book = this.select_remove_carts[i]
					if (book.discountRate == null) {
						total = total - 0 + ((book.price * book.cartNum).toFixed(2) - 0)
					} else {
						total += ((book.discountRate * book.price * book.cartNum).toFixed(2) - 0)
					}
				}
				this.total_price = total
			},
			removeCartBatch() {

				this.$confirm('是否将选中商品从购物车中移除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = new URLSearchParams()
					for (let i = 0; i < this.select_remove_carts.length; i++) {
						data.append('bookIds', this.select_remove_carts[i].id)
					}
					axios({
						method: 'post',
						url: 'http://localhost:9000/shopping_cart/remove_cart_batch',
						data: data,
						headers: {
							token: localStorage.getItem('token')
						}
					}).then(resp => {
						this.$message({
							type: 'success',
							message: '已成功移除'
						});

						this.loadMyShoppingCarts()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});


			},
			toShowPay() {
				let selected_item = this.select_remove_carts
				if (selected_item.length <= 0) {
					this.$message({
						type: 'error',
						message: '请选中商品后购买'
					});
					return
				}
				sessionStorage.setItem('selected_cart_item', JSON.stringify(selected_item))
				location.href = '../order/order.html'
			}


		},
		created() {
			this.loadMyShoppingCarts()
		}
	})
</script>